<script setup lang="ts">
import { navigateTo } from '@tarojs/taro';
import { ASSET_STATUS } from '/@/common/constant';
import { statusStyle } from '../../utils/common';

/**
 * 进入详情页面
 */
function detailPage(item: AssetInfo.Dto) {
  if (item.deviceId) {
    navigateTo({
      url: `/pages/device-account/detail/index?id=${item.id}&deviceId=${item.deviceId}`,
    });
  } else {
    navigateTo({
      url: `/pages/device-account/detail/index?id=${item.id}`,
    });
  }
}

const props = defineProps<{ item: AssetInfo.Dto }>();
</script>
<template>
  <view class="device-account-item" @click="detailPage(item)">
    <view class="device-account-item__header">
      <view class="device-account-item__header__center">
        <view class="device-account-item__header__center__title">
          <text>{{ props.item.assetName || '-' }}</text>
        </view>
        <view>
          <text>资产编号:&nbsp;&nbsp;</text>
          <text>{{ props.item.assetCode || '-' }}</text></view
        >
        <view class="device-account-item__area"
          ><text>所属区域:&nbsp;&nbsp;</text>
          <text>{{ props.item.areaName || '-' }}</text>
        </view>
      </view>
      <view class="device-account-item__state" :style="statusStyle(props.item.status)"
        >{{ props.item.status ? ASSET_STATUS[props.item.status] : '_' }}
      </view>
    </view>
  </view>
</template>
<style lang="scss">
.device-account-item {
  background-color: #fff;
  border-radius: 16px;
  margin-top: 20px;
  padding: 15px 20px;
  overflow: hidden;
  &:last-child {
    margin-bottom: 20px;
  }

  &__header {
    color: #999;
    font-size: 28px;
    display: flex;

    &__center {
      margin-right: 20px;
      flex: 1;
      &__title {
        overflow: hidden;
        white-space: nowrap;
        word-break: keep-all;
        text-overflow: ellipsis;
        font-size: 32px;
        font-weight: bold;
        color: #2c2c2c;
        margin-bottom: 10px;
      }
    }
  }

  &__state {
    flex-wrap: wrap;
    text-align: center;
    background-color: #26ee4e36;
    width: 90px;
    height: 42px;
    border-radius: 4px;
  }

  &__area {
    margin-top: 10px;
  }
}
</style>
